<template>
  <div id="container">
    <my-scrollbar ref="scrollRef">
      <router-view
        @scrollTo="scrollTo"
        @scrollUpdate="scrollUpdate"></router-view>
    </my-scrollbar>
  </div>
</template>

<script>
import MyScrollbar from 'components/content/perfectscrollbar/MyScrollbar.vue'

export default {
  name: 'Container',
  components: {
    MyScrollbar
  },
  methods: {
    // 1. 滚动至
    scrollTo (top) {
      this.$nextTick(() => {
        this.$refs.scrollRef.scrollTo(top)
      })
    },
    // 2. 刷新滚动
    scrollUpdate () {
      // 编程异步操作, 不然会读取不了update
      setTimeout(() => {
        this.$refs.scrollRef.update()
      }, 0)
      // this.$refs.scrollRef.update()
    }
  }
}
</script>

<style scoped lang="less">
#container {
  flex: 1;
  height: calc(100% - 53px);
  width: 100%;
  overflow: hidden;
  background-color: #fafafa;
}
</style>
